<template>
	<div class="container-page user-page">
		<view-crumb></view-crumb>
		<view-title></view-title>

		<div class="user-form form">
			<el-form :model="form" label-width="120px">
				<el-form-item label="昵称" required>
					<el-input size="mini" v-model="form.nickname"></el-input>
				</el-form-item>
				<el-form-item label="性别" required>
					<el-radio-group v-model="form.sex">
						<el-radio label="男">男</el-radio>
						<el-radio label="女">女</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="身份证" required>
					<el-input size="mini" v-model="form.card_id"></el-input>
				</el-form-item>
				<el-form-item label="银行卡号">
					<el-input size="mini" v-model="form.bank_id"></el-input>
				</el-form-item>
				<el-form-item label="籍贯" required>
					<el-input size="mini" v-model="form.address"></el-input>
				</el-form-item>
				<el-form-item label="手机号" required>
					<el-input size="mini" v-model="form.phone"></el-input>
				</el-form-item>
				<el-form-item label="年假" required>
					<el-input size="mini" v-model="form.year_day"></el-input>
				</el-form-item>
				<el-form-item label="在职状态" required>
					<el-switch
						v-model="form.status"
						:active-value="1"
						:inactive-value="0"
					></el-switch>
				</el-form-item>
				<el-form-item label="入职时间" required>
					<el-date-picker
						v-model="form.join_date"
						type="date"
						value-format="yyyy-MM-dd"
						placeholder="入职时间"
					>
					</el-date-picker>
				</el-form-item>
				<el-form-item label="离职时间">
					<el-date-picker
						v-model="form.leave_date"
						type="date"
						value-format="yyyy-MM-dd"
						placeholder="离职时间"
					>
					</el-date-picker>
				</el-form-item>
			</el-form>
		</div>
		<div class="fixedBot">
			<el-button type="info" size="small" @click="historyBack"
				>取消</el-button
			>
			<el-button type="primary" size="small" @click="submitForm"
				>提交</el-button
			>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			form: {
				id: 0,
				nickname: "",
				avatar: "",
				sex: "",
				card_id: "",
				bank_id: "",
				address: "",
				status: 1,
				phone: "",
				year_day: 0,
				join_date: "",
				leave_date: "",
			},
		};
	},

	created() {
		let id = this.$route.query.id;
		id && this.getUser(id);
	},

	methods: {
		getUser(id) {
			this.$axios.get("userDetail", { params: { id } }).then((res) => {
				this.form = res.user;
			});
		},

		//后退
		historyBack() {
			this.$router.go(-1);
		},

		// 提交
		submitForm() {
			if (this.verify()) return;
			let api = this.$route.query.id ? "userEdit" : "userAdd";
			this.$axios.post(api, this.form).then((res) => {
				this.$message({
					message: `保存成功`,
					type: "success",
					duration: 1500,
					onClose: () => {
						this.$router.go(-1);
					},
				});
			});
		},

		// 验证输入
		verify() {
			let obj = {
				nickname: ["请输入员工昵称"],
				sex: ["请选择性别"],
				card_id: ["请输入身份证号"],
				// bank_id: ["请输入银行卡号"],
				address: ["请输入籍贯"],
				phone: ["请输入手机号"],
				year_day: ["请输入年假"],
				join_date: ["请选择入职时间"],
			};
			let tips = this.$utils.verify(obj, this.form);
			if (tips) {
				return this.$message.error(tips) && true;
			}

			return false;
		},
	},
};
</script>

<style lang="less" scoped></style>
